<template>
  <div style=" width:40%; height:70%;padding-right:15px;margin:25px auto">
    <el-row style="display: flex;justify-content: end;">
      <el-select v-model="value" placeholder="请选择" @change="changeValue">
        <el-option
          v-for="item in options" 
          :key="item.value"
          :label="item.label"
          :value="item.value" 
          >
        </el-option>
      </el-select>
    </el-row>
    <el-row class="title">磁盘概览</el-row>
    <div v-for="(disk, index) in deskData" :key="index" style="margin-top: 10px;">
      <el-row class="fontbox">
        <el-col :span="9" class="fontS1">{{ disk.fileSystem }}</el-col>
        <el-col :span="5" class="fontS2">分区大小：{{ disk.size }}</el-col>
        <el-col :span="5" class="fontS3">已使用：{{ disk.used }}</el-col>
        <el-col :span="5" class="fontS4">可用：{{ disk.avail }}</el-col>
      </el-row>
      <el-row style="margin-top: 10px;">
        <el-progress :text-inside="true" :stroke-width="26" :percentage="disk.usePer" :color="disk.color" />
      </el-row>
    </div>
  </div>
</template>

<script>
import { getDesk } from '@/api/chart'

export default {
  data() {
    return {
      deskData: [],
      colorList: ['#8F50E0', '#4994E9', '#7BD8A0', '#FFBE7B'],
      value: '',
      options: []
    }
  },
  mounted() {
    this.init()
    this.fetchDeskData()
  },
  methods: {
    async init() {
      const res = await getDesk()
      const mainDesk = res[0]
      this.deskData = mainDesk.map((item, index) => {
        return {
          ...item,
          usePer: parseInt(item.usePer), // 转换usePer为整数
          color: this.colorList[index % this.colorList.length]
        }
      })
    },
    async fetchDeskData() {
      const res = await getDesk()
      console.log('磁盘', res)
      for (let i = 0; i < res.length; i++) {
        console.log('hostname:', res[i][0].hostname)
        this.options.push({
          value: res[i][0].hostname,
          label: res[i][0].hostname
        })
      }
      this.value = this.options[0].value
    },
    async changeValue(v) {
      console.log('选择的主机', v)
      const res = await getDesk()
      for (let i = 0; i < res.length; i++) {
        console.log('hostname:', res[i][0].hostname)
        if (res[i][0].hostname === v) {
          const mainDesk = res[i]
          this.deskData = mainDesk.map((item, index) => {
            return {
              ...item,
              usePer: parseInt(item.usePer), // 转换usePer为整数
              color: this.colorList[index % this.colorList.length]
            }
          })
        }
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.title{
  font-weight: bold;
  font-size: 19px;
  color: #464646;
  margin-bottom:50px;
}
.fontbox{
  display: flex;
  align-items: center;
}
.fontS1{
  min-width: 100px;
  font-size: 14px;
  font-weight: bold;
  color: #383838;
}
.fontS2{
  min-width: 100px;
  font-size: 12px;
  color: #808080;
}
.fontS3{
  min-width: 100px;
  font-size: 12px;
  color: #808080;

}
.fontS4{
  font-size: 12px;
  color: #808080;

}
</style>
